<template>
  <view class="custom-tab-bar fixed bottom-0 left-0 right-0 max-w-[750rpx] bg-white flex justify-around py-[24rpx] shadow-[0_-8rpx_30rpx_rgba(0,0,0,0.08)] z-[1000] rounded-tl-[50rpx] rounded-tr-[50rpx] border-t border-[#eee]">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      class="tab-item flex flex-col items-center text-[24rpx] transition-all duration-300"
      :class="{ 'text-[#2196F3]': selected === index, 'text-[#999]': selected !== index }"
      @click="switchTab(index, item.pagePath)"
    >
      <view 
        class="tab-icon w-[44rpx] h-[44rpx] flex items-center justify-center mb-[10rpx] transition-all duration-300"
        :class="{ 'text-[#2196F3] translate-y-[-6rpx]': selected === index }"
      >
        <IconFont :name="item.icon" class="text-[44rpx]" />
      </view>
      <text class="tab-text text-[24rpx] font-medium">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'

// Tab 列表数据
const tabList = ref([
  {
    pagePath: '/pages/home/home',
    text: '首页',
    icon: 'home'
  },
  {
    pagePath: '/pages/reward/hall',
    text: '悬赏',
    icon: 'award'
  },
  {
    pagePath: '/pages/post/index',
    text: '发布',
    icon: 'plus'
  },
  {
    pagePath: '/pages/message/message',
    text: '消息',
    icon: 'comment-dots'
  },
  {
    pagePath: '/pages/mine/mine',
    text: '我的',
    icon: 'user'
  }
])

// 当前选中的 tab
const selected = ref(0)

// 切换 tab
const switchTab = (index: number, pagePath: string) => {
  selected.value = index
  
  // 跳转到对应页面
  Taro.switchTab({
    url: pagePath
  })
}

// 设置选中状态
const setSelected = (index: number) => {
  selected.value = index
}

// 暴露方法给页面调用
defineExpose({
  setSelected
})

// 页面显示时设置选中状态
onMounted(() => {
  const pages = Taro.getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const currentPath = '/' + currentPage.route
  
  // 根据当前页面路径设置选中状态
  const index = tabList.value.findIndex(item => item.pagePath === currentPath)
  if (index !== -1) {
    selected.value = index
  }
})
</script> 